<template>
  <div class="album-detail mtop-20">
    <el-card>
      <!-- 专辑图片以及信息 -->
      <div class="detail-desc">
        <!-- 专辑图片 -->
        <div class="detail-img-wrapper">
          <img
            class="img img-radius-4 img-border"
            :src="albumInfo.picUrl"
            alt=""
          />
        </div>
        <!-- 专辑信息 -->
        <div class="detail-desc-info">
          <div class="info">
            <el-tag type="danger">专辑</el-tag>
            <span class="mleft-12 font-bold font-20">{{ albumInfo.name }}</span>
          </div>
          <!-- 专辑按钮 -->
          <div class="info-btn mtop-10">
            <button class="btn btn-red">
              <i class="el-icon-caret-right"></i>
              <span>播放全部</span>
            </button>
            <button class="btn btn-white mleft-10" v-if="!isSub" @click="subAlbum(1)">
              <i class="el-icon-folder-add"></i>
              <span class="btn-text">收藏({{ subCount | countFormat }})</span>
            </button>
            <button class="btn btn-white mleft-10" v-else @click="subAlbum(0)">
              <i class="el-icon-folder-checked"></i>
              <span class="btn-text">已收藏({{ subCount | countFormat }})</span>
            </button>
            <button class="btn btn-white mleft-10">
              <i class="el-icon-position"></i>
              <span class="btn-text">分享{{ shareCount | countFormat }}</span>
            </button>
          </div>
          <div class="author font-14">
            <span>歌手：</span>
            <span
              class="pointer author-name"
              v-for="a in albumInfo.artists"
              :key="a.id"
              @click="toArtistDetail(a.id)"
              >{{ a.name }}</span
            >
          </div>
          <div>
            <span class="font-14">
              时间：{{ albumInfo.publishTime | dateFormat }}
            </span>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="歌曲列表" name="first">
          <MusicList :list="songsList"></MusicList>
        </el-tab-pane>
        <el-tab-pane label="评论 " name="second">
          <CommentList
            :hotCommentList="hotCommentList"
            :newCommentList="newCommentList"
            :id="id"
            :type="3"
            @getNew="getNewComment"
          ></CommentList>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="commentParams.pageNo"
            :page-size="commentParams.pageSize"
            layout="prev, pager, next"
            :total="commentCount"
            align="center"
            background
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="专辑详情" name="third">
          <div>
            <div class="font-bold">专辑介绍</div>
            <div class="my-pre" v-if="albumInfo.description.length !== 0">
              <p>{{ albumInfo.description }}</p>
            </div>
            <div v-else style="text-align: center">没有专辑详情</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  getAlbumDetail,
  getAlbumDynamic,
  getHotComment,
  getComment,
  setAlbumSub,
} from "@/api/request";
import MusicList from "@/components/list/MusicList.vue";
import CommentList from "@/components/list/commentList.vue";
import { mapState } from "vuex"
export default {
  components: { MusicList, CommentList },
  data() {
    return {
      id: this.$route.params.id,
      albumInfo: {},
      songsList: [],
      shareCount: 0,
      subCount: 0,
      commentCount: 0,
      isSub: false,
      activeName: "first",
      hotCommentList: [],
      newCommentList: [],
      commentParams: {
        id: 0,
        type: 3,
        pageNo: 1,
        pageSize: 10,
        sortType: 3,
        cursor: 0,
      },
    };
  },
  computed:{
    ...mapState(['isLogin'])
  },
  created() {
    this.commentParams.id = this.id;
    this.getAlbum();
    this.getAlbumDynamic();
    this.getHotComment();
    this.getNewComment();
  },
  methods: {
    // 获取专辑详情
    async getAlbum() {
      const { data: res } = await getAlbumDetail(this.id);
      if (res.code !== 200) return this.$message.error("获取信息失败");
      this.albumInfo = res.album;
      this.songsList = res.songs;
    },
    // 获取歌单评论数，点赞，收藏
    async getAlbumDynamic() {
      const { data: res } = await getAlbumDynamic(this.id);
      if (res.code !== 200) return;
      this.isSub = res.isSub;
      this.shareCount = res.shareCount;
      this.subCount = res.subCount;
    },
    // 点击去往歌手主页
    toArtistDetail(id) {
      console.log(id);
    },
    // 获取热门评论
    async getHotComment() {
      const { data: res } = await getHotComment(this.id, 3, 5);
      if (res.code !== 200) return;
      this.hotCommentList = res.hotComments;
    },
    // 获取最新评论
    async getNewComment() {
      const { data: res } = await getComment(this.commentParams);
      if (res.code !== 200) return;
      console.log(res);
      this.newCommentList = res.data.comments;
      this.commentParams.cursor = res.data.cursor;
      this.commentCount = res.data.totalCount;
    },
    //  分页器
    handleCurrentChange(val) {
      this.commentParams.pageNo = val;
      this.$scrollTo();
      this.getNewComment();
    },
    // 收藏取消专辑
    async subAlbum(type){
      if(!this.isLogin) return this.$message.error('需要登录');
      let cancel = false ;
      if(this.isSub){
        await this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          }); 
        });
      }
      if(cancel) return;
      const {data:res} = await setAlbumSub(this.id , type);
      if(res.code !== 200) return 
      this.isSub = !this.isSub;
      if(type == 1) {
        this.subCount++ ; 
        this.$message.success('收藏成功');
      }  else {
        this.subCount-- ; 
        this.$message.success('取消收藏成功');
      }
    }
  },
};
</script>

<style lang="less" scoped>
.detail-desc {
  display: flex;
  .detail-img-wrapper {
    width: 180px;
    height: 180px;
  }
  .detail-desc-info {
    line-height: 24px;
    margin-left: 20px;
    .author {
      margin: 5px 0;
      display: flex;
      flex-wrap: wrap;
    }
    .author-name {
      color: #3771dd;
    }
  }
}
.my-pre {
  text-indent: 2em;
  line-height: 2;
  width: 100%;
  p {
    color: #676767;
  }
}
/deep/.el-tabs__item.is-active {
  color: #ff2727;
  font-size: 22px;
  font-weight: 500;
}
/deep/.el-tabs__item:hover {
  color: #ff2727;
  font-size: 22px;
  font-weight: 500;
}
/deep/.el-tabs__active-bar {
  background-color: #ff2727;
  height: 5px;
  border-radius: 50px;
}
</style>